<template>
	<div class="operate_examine table-theme">
		<head-title title="审核--套餐审核"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="status" @roleType="stateType"></tabs-view>
					 <select-view
						:option-list="typeList"
						:value="type"
						placeholder="操作类型"
						type="type"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
					<!-- <div class="add" style="margin-right: 10px;"><el-button type="primary" @click="opneData">审核数据</el-button></div> -->
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="examineList">
				<el-table-column label="序号" align="center" prop="id"></el-table-column>
				<el-table-column label="工厂序号" align="center" prop="factory_id"></el-table-column>
				<el-table-column label="用户序号	" align="center" prop="user_id"></el-table-column>
				<el-table-column label="套餐名称	" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="平台款号	" align="center" prop="goods_sn"></el-table-column>
				<el-table-column label="套餐图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="工厂编号	" align="center" prop="factory_sn"></el-table-column>
				<el-table-column label="工厂名称" align="center" prop="factory_name"></el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="套餐编号" align="center" prop="type_id"></el-table-column>
				<el-table-column label="状态" align="center" prop="status_name"></el-table-column>
				<el-table-column label="备注" align="center" prop="goods_remarks"></el-table-column>
				<el-table-column label="拒绝原因" align="center" prop="reason"></el-table-column>
				<el-table-column label="审核人" align="center" prop="examine_user_id"></el-table-column>
				<el-table-column label="审核时间" align="center" prop="examine_time"></el-table-column>
				<el-table-column label="申请时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="operate(0, scope.row.type_id, scope.row.id)">详情</el-button>
						<el-button v-if="scope.row.status == 0" type="primary" size="mini" @click="operate(1, scope.row.id)">审核</el-button>
						<el-button v-if="scope.row.status == 0" type="danger" size="mini" @click="operate(2, scope.row.id)">拒绝</el-button>
						<el-button type="danger" size="mini" @click="operate(3, scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

		<!-- 拒绝原因弹框 -->
		<el-dialog title="拒绝原因" :visible.sync="remarksDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="remarksForm" :rules="remarksFormRules" ref="remarksForm" label-width="120px">
				<el-form-item label="拒绝原因:" prop="reason"><el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="remarksForm.reason"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="remarksDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('remarksForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import SelectView from "@/components/SelectView";
import examineData from '@/components/layer-dialog/examine-data.vue';
import TabsView from '@/components/TabsView'
export default {
	name:'goods_examine',
	components: {
		ImgPopover,
		SelectView,
		TabsView
	},
	data() {
		return {
			type: '', // 0  编辑商品 1 添加商品 2 删除商品  3 商品上架 4 商品下架
			remarksDialog: false,
			remarksForm: {
				reason: ''
			},
			remarksFormRules: {
				reason: [{ required: true, message: '请输入内容' }]
			},
			examineList: [], // 审核列表
			total: 0,totalData: 0, 
			status: 0,
			page: 0,
			classifyList: ['全部', '待审核' ,'通过' ,'拒绝' ],
			searchOption: [
				{
					value: 0,
					label: "平台款号",
				},
				{
					value: 1,
					label: "套餐ID",
				},
				{
					value: 2,
					label: "序号",
				},
			],
			classSelect: 0,
			selectContent: "",
			typeList:[
				{
					label:'所有类型',
					value:''
				},
				{
					label:'编辑套餐',
					value:0
				},
				{
					label:'添加套餐',
					value:1
				},
				{
					label:'删除套餐',
					value:2
				},
				{
					label:'套餐上架',
					value:3
				},
				{
					label:'套餐下架',
					value:4
				}
			]
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				category: 4
			};
			if (this.status != 0) {
				// data.status 0 待审核 1 审核通过 2 拒绝
				data.status = this.status - 1;
			}

			if (this.type !== '') {
				data.type = this.type;
			}

			// classSelect 1平台款号  2工厂编号 3工厂名称
			if (this.classSelect == 0 && this.selectContent != '') {
				data.goods_sn = this.selectContent;
			} else if (this.classSelect == 1 && this.selectContent != '') {
				data.factory_sn = this.selectContent;
			} else if (this.classSelect == 2 && this.selectContent != '') {
				data.factory_name = this.selectContent;
			}
			this.$http(this.$ApiList.ExamineList, data).then(res => {
				this.examineList = [];
				if (res.datas.length != 0) {
					this.examineList = res.datas.list;
					this.total = res.datas.count;
				}
			});
		},
		stateType(type) {
			this.status = type;
			this.init();
		},
		// 第三个参数给详情页里面的审核操作用的
		operate(type, id, examine_id) {
			let data = {
				examine_id: id
			};
			//type 0详情 1审核 2拒绝 3删除
			switch (type) {
				case 0:
					// 在这里 id 是goods id
					this.$router.push({ path: '/goods_examine_details', query: { type: 0, id: id, examine_id: examine_id } });
					break;
				case 1:
					this.$http(this.$ApiList.ExamineSuccess, data).then(res => {
						if (res.code == 200) {
							this.$layer.msg('操作成功');
							this.page = 1;
							this.init();
						}
					});
					break;
				case 2:
					this.remarksDialog = true;
					this.remarksForm.examine_id = id;
					break;
				case 3:
					this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
						.then(() => {
							data.factory_sn = localStorage.getItem('factory_sn')
							this.$http(this.$ApiList.ExamineDelete, data).then(res => {
								if (res.code == 200) {
									this.$message({
										type: 'success',
										message: '删除成功!'
									});
									this.page = 1;
									this.init();
								}
							});
						})
						.catch(() => {});
					break;
			}
		},
		//提交
		confirmClick(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.ExamineRefuse, this.remarksForm).then(res => {
						if (res.code == 200) {
							this.$layer.msg('操作成功');
							this.remarksDialog = false;
							this.init();
						}
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		//搜素
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		refreshPage() {
			this.page = 1;
			this.selectContent = '';
			this.status = 0;
			this.classSelect = 0;
			this.init()
		},
		opneData(){
			this.$layer.iframe({
				title:'商品审核数据',
				maxmin:true,
				area: ['50%', '60%'],
				content: {
					content: examineData, //传递的组件对象
					parent: this, //当前的vue对象
					data: {
					} //props
				}
			})
		},
		setSelectValue(obj){
			const { type,value } = obj
			switch (type) {
				case 'type':
					this.type= value
					break;
			
				default:
					break;
			}
			this.init()
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>
</style>
